<template>
<div style="width: 100%;height: 100vh;overflow: hidden;background-color:darkcyan">

    <div style="width: 400px;margin:150px auto">
        <div style="color: #cccccc;font-size: 30px;text-align: center;padding: 30px 0" >欢迎注册</div>
        <el-form ref="form" :model="form"  size="normal" :rules="rules">
            <el-form-item prop="username">
                <el-input v-model="form.username"   prefix-icon="el-icon-user-solid" ></el-input>

            </el-form-item>
            <el-form-item  prop="password"
                           :rules="[{required:true,message:'请输入密码',trigger:'blur'}]">
                <el-input v-model="form.password" prefix-icon="el-icon-lock" show-password=""></el-input>
            </el-form-item>
            <el-form-item  prop="confirm"
                           :rules="[{required:true,message:'请确定输入密码',trigger:'blur'}]">
                <el-input v-model="form.confirm" prefix-icon="el-icon-lock" show-password=""></el-input>
            </el-form-item>
        <el-form-item>
            <el-button style="width: 100%;" type="primary" @keyup.enter.native="register"  @click="register" id="login"> 注册</el-button>
        </el-form-item>
        </el-form>
    </div>

</div>
</template>

<script>
    import Particles from '../components/particles/index'
    import request from '../utils/request'

    export default {
        name: "register",
        components: {Particles},
        data(){
            return{
                form:{},
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 1, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                    ],
                    confirm: [
                        { required: true, message: '请确认输入密码', trigger: 'blur' },
                        { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                    ],}

            }
        },
        created() {
            let that = this;
            document.onkeydown =function(e){
                e = window.event || e;
                if(that.$route.path=='/login'&&(e.code=='Enter'||e.code=='enter')){//验证在登录界面和按得键是回车键enter
                    that.login('form');//登录函数
                }
            }
        },
        methods:{
            register(){
               this.$refs['form'].validate((valid) => {
                    if (valid) {
                if(this.form.password!=this.form.confirm){
                    this.$message({

                        message: "两次密码输入不一致",
                        type: 'error',

                    })
                    return
                }
                request.post("/api/user/register",this.form).then(res=>{
                    if (res.code == '0') {
                        this.$message({
                            message: '注册成功',
                            type: 'success',

                        });
                        this.$router.push("/login") //登录成功之后进行页面跳转
                    } else {
                        this.$message({

                            message: res.msg,
                            type: 'error',

                        })
                    }
                })
            }})}
        }
    }
</script>

<style scoped>
#login{



    box-shadow: 0 0 0px #ccc;
    transition: all 0.5s;
}
     .el-input__inner{
        -webkit-appearance: none;


        border-radius: 20px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;

        height: 45px;
        line-height: 45px;
        padding: 0 10px;
        width: 100%;
        background: darkcyan;

    }

</style>
